<script setup lang="ts">
  import HomeMap from './index.vue'
  import { nextTick, ref } from 'vue'

  defineOptions({
    name: 'FullScreenMapHome',
  })

  // 全拼地图显示状态
  const fullScreenMapVisible = ref(false)

  // 地图组件实例
  const homeMapInstance = ref<InstanceType<typeof HomeMap> | null>(null)

  /**
   * 全拼点击事件
   */
  const onFullScreenClick = () => {
    fullScreenMapVisible.value = true
    nextTick(() => {
      if (homeMapInstance.value) {
        homeMapInstance.value.install()
      }
    })
  }

  /**
   * 关闭全屏地图
   */
  const onClose = () => {
    fullScreenMapVisible.value = false
    if (homeMapInstance.value) {
      homeMapInstance.value.destory()
    }
  }
</script>

<template>
  <div class="home-full-screen-map-wrapper">
    <span class="operate" @click="onFullScreenClick">
      <i class="iconfont icon-full-screen-02"></i>
      全屏
    </span>

    <div v-if="fullScreenMapVisible" class="home-full-screen-map">
      <home-map ref="homeMapInstance" mode="fullScreen"></home-map>
    </div>

    <div v-if="fullScreenMapVisible" class="close-btn">
      <h-button type="error" is-modal @click="onClose">
        <span style="font-size: 14px; letter-spacing: 2px">关闭</span>
      </h-button>
    </div>
  </div>
</template>

<style scoped lang="scss">
  .home-full-screen-map-wrapper {
    .operate {
      cursor: pointer;
      color: $primaryColor;
      font-size: 14px;
      display: flex;
      align-items: center;

      .iconfont {
        font-size: 24px;
        width: 19px;
        height: 19px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 3px;
        font-weight: bold;
      }
    }

    .home-full-screen-map {
      position: fixed;
      z-index: 9999;
      background-color: #fff;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
    }

    .close-btn {
      position: fixed;
      right: 12px;
      top: 12px;
      z-index: 99999;
    }
  }
</style>
